<template>
  <div>
    <el-row :gutter="32">
      <el-col :lg="8">

        <div class="   ml20 mt40 classflex-left ">
          <div class="grid-content bg-purple-dark  ml20  text-size-23-w700  ">订单管理</div>
        </div>
        <div class="content ml20">
          <!-- <el-card class="item" v-for="item in list" :key="item"> -->
          <div class="item">
            <div class="text-gray text-size-14 ">订单数量</div>
            <div class=" text-black text-size-20 mt20 ">{{ this.total}}</div>

          </div>
          <div class="item">
            <div class="text-gray text-size-14 ">订单总金额(￥)</div>
            <div class=" text-black text-size-20 mt20 ">{{ this.allmoney}}</div>

          </div>
          <div class="item">

            <div class="text-gray text-size-14 ">已确认收入(￥)</div>
            <div class=" text-black text-size-20 mt20 ">{{ this.allsummoneyDetermined}}</div>

          </div>

        </div>
        <el-divider></el-divider>
        <!-- {{form}} -->
        <div class=" classflex-space-between ml30">

          <el-form :model="form" ref="form" v-show="showSearch" label-width="80px">
            <div>
              <el-form-item label="创建时间">
                <el-date-picker v-model="dateRange" style="width: 360px" value-format="yyyy-MM-dd" type="daterange"
                  range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
              </el-form-item>
            </div>


            <div>
              <el-form-item label="报名课程" prop="orderCourse">

                <el-select style="width: 360px;" v-model="orderCourse" placeholder="请选择报名课程" filterable>
                  <el-option v-for="dict in courseList" :key="dict.id" :label="dict.courseName"
                    :value="dict.courseName">
                  </el-option>

                </el-select>

              </el-form-item>
            </div>
            <div>
              <el-form-item label="销售人员" prop="teachers">

                <el-select style="width: 360px;" v-model="teachers" placeholder="请选择销售人员" filterable>
                  <el-option v-for="dict in userList" :key="dict.id" :label="dict.nickName" :value="dict.nickName">
                  </el-option>

                </el-select>

                <!-- <el-select v-model="queryParams.orderType" style="width: 360px" placeholder="请选择课时类型" clearable>
                  <el-option v-for="dict in dict.type.order_type" :key="dict.value" :label="dict.label"
                    :value="dict.value" />
                </el-select> -->
              </el-form-item>
            </div>
            <div class="">
              <el-form-item label="学员姓名" prop="orderStudentName">



                <el-select style="width: 360px;" v-model="orderStudentName" placeholder="请选择学员姓名" filterable>
                  <el-option v-for="dict in studentList" :key="dict.id" :label="dict.userName" :value="dict.userName">
                  </el-option>

                </el-select>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="状态" prop="state">
                <el-select v-model="state" style="width: 360px" placeholder="请选择状态" clearable>
                  <el-option v-for="dict in dict.type.order_state" :key="dict.value" :label="dict.label"
                    :value="dict.value" />
                </el-select>




              </el-form-item>
            </div>

            <el-divider></el-divider>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" style="width: 300px;" @click="handleQuery">确定</el-button>

            </el-form-item>

          </el-form>
        </div>
      </el-col>
      <el-col :lg="16">
        <div style="height:650px;width: 95%;">
          <div class="mt50" style="height: 80%;">

            <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange" border>

              <el-table-column label="经办日期" align="center" prop="orderTime" />
              <el-table-column label="订单号" align="center" prop="orderId" />
              <el-table-column label="报名学员" align="center" prop="orderStudentName" />
              <!-- <el-table-column label="报名课程" align="center" prop="orderCourse" /> -->
              <el-table-column label="报名课程" align="center" prop="orderCourse">
                <template slot-scope="scope">
                  <!-- <dict-tag :options="dict.type.order_type" :value="scope.row.orderType" /> -->
                  <!-- {{fullData(scope.row)}} -->
                  <div class="text-green" @click="openorderdetails(scope.row)">
                    {{scope.row.orderCourse}}
                  </div>
                </template>
              </el-table-column>


              <el-table-column label="课时总数" align="center" prop="residue" />
              <el-table-column label="到期日" align="center" prop="orderCourseEndtime">
                <template slot-scope="scope">
                  <!-- <dict-tag :options="dict.type.order_type" :value="scope.row.orderType" /> -->
                  {{fullData(scope.row)}}
                </template>
              </el-table-column>




              <!--  <el-table-column label="到期日" align="center" prop="orderCourseEndtime" /> -->
              <el-table-column label="购课金额" align="center" prop="actualAmountReceived" />
              <el-table-column label="其他费用" align="center" prop="moneyOtherTotal" />






              <el-table-column label="总金额" align="center" prop="moneyOrderTotal" />



              <el-table-column label="状态" align="center" prop="state">
                <template slot-scope="scope">
                  <div class="classflex-center">
                    <div class="classflex-left" v-if="scope.row.state=='未开始'">
                      <div class="dot"></div>
                      <div class="ml10 text-orange">{{scope.row.state}}</div>

                    </div>
                    <div class="classflex-left" v-else-if="scope.row.state=='进行中'">
                      <div class="dotdo"></div>
                      <div class="ml10 text-green">{{scope.row.state}}</div>

                    </div>
                    <div class="classflex-left" v-else-if="scope.row.state=='已完结'">
                      <div class="dotend"></div>
                      <div class="ml10 text-gray">{{scope.row.state}}</div>

                    </div>
                  </div>


                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="height: 20%;">
            <pagination v-show="total>0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
              @pagination="getList" />
          </div>

        </div>



      </el-col>
    </el-row>


    <order-details-drawer class="" ref="OrderDetailsDrawer" @delOrderSuccess="delOrderSuccess" @addClassrecords="delOrderSuccess">

    </order-details-drawer>
  </div>
</template>

<script>
  import OrderDetailsDrawer from '@/components/OrderDetailsDrawer'

  import {
    listCourse,
    getCourse,
    delCourse,
    addCourse,
    updateCourse
  } from "@/api/course/course";
  import {
    listStudent,
    getStudent,
    delStudent,
    addStudent,
    updateStudent
  } from "@/api/student/student";
  import {
    listOrder,
    getOrder,
    delOrder,
    addOrder,
    updateOrder
  } from "@/api/order/order";
  import {
    listUser,
    listUser2,
    getUser,
    delUser,
    addUser,
    updateUser,
    resetUserPwd,
    changeUserStatus,
    deptTreeSelect
  } from "@/api/system/user";

  export default {
    name: "Order",
    components: {
      OrderDetailsDrawer
    },
    dicts: ['order_type', "order_state"],
    data() {
      return {
        // 日期范围
        dateRange: [],
        list: [{
          id: 0,
          name: "订单数量",
          num: "838笔",
        }, {
          id: 1,
          name: "订单总金额(￥)",
          num: "1,340,418.90",
        }, {
          id: 2,
          name: "已确认收入(￥)",
          num: "864,852.63",
        }],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 订单
        // 表格数据
        orderList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          orderStudentName: null,
          orderCourse: null,
          orderTime: null,
          orderType: null,
          orderCourseNumber: null,
          orderFreecourseNumber: null,
          orderCourseEndtime: null,
          amountReceivable: null,
          discountAmount: null,
          actualAmountReceived: null,
          totalClassHours: null,
          consumed: null,
          residue: null,
          orderRemark: null,
          orderRemark2: null,
          orderRemark3: null,
          orderRemark4: null,
          orderRemark5: null,
          orderRemark6: null,
          orderRemark7: null,
          orderRemark8: null,
          orderRemark9: null,
          orderRemark10: null,
          moneyDetermined: null,
          moneyUnconfirmed: null,
          droppedClassesNumber: null,
          moneyDroppedTotal: null,
          otherJson: null,
          moneyOtherTotal: null,
          moneyOrderTotal: null,
          profitAndLoss: null,
          unitPrice: null,
          unit: null,
          state: null,
          saleName: null,
          deptId: null,
          studentId: null,
          saleId: null,
          saleJson: null
        },
        // 表单参数
        form: {
          pageNum: 1,
          pageSize: 10,
        },
        // 表单校验
        rules: {},
        // 学生信息表格数据
        studentList: [],
        queryParamsStudent: {},
        courseList: [],
        queryParamsCourse: {},
        queryParamsTeacher: {},
        userList: [],
        orderCourse: "",
        orderStudentName: "",
        teachers: "",
        allsummoneyDetermined: "",

        state: "",
        allmoney: ""
      };
    },
    created() {
      this.getPageHeight();
      this.getStudentList();
      this.getCourseList();
      this.getTeacherList();


    },
    mounted() {

      const params1 = this.$route.query; // 获取query对象
      // console.log("订单参数:" + JSON.stringify(params1)); // 输出{key: 'value'}

      if (params1.name != null && params1.orderCourse != null) {
        this.orderStudentName = params1.name;
        this.orderCourse = params1.orderCourse;
        this.form.orderStudentName = params1.name;
        this.form.orderCourse = params1.orderCourse;

        this.teachers = "全部员工";
        this.state = "全部状态";

        this.form.teachers == "";
        this.form.state = "";
        // console.log("执行1");



      } else if (params1.name != null) {
        this.orderStudentName = params1.name;
        this.form.orderStudentName = params1.name;

        this.teachers = "全部员工";
        this.state = "全部状态";
        this.orderCourse = "全部课程";

        this.form.teachers == "";
        this.form.state = "";
        this.form.orderCourse = "";
        console.log("执行2");

      } else {
        this.orderCourse = "全部课程";
        this.orderStudentName = "全部学生";
        this.teachers = "全部员工";
        this.state = "全部状态";
        console.log("执行3");
      }
      this.getList();
    },
    computed: {


    },
    watch: {

      'orderCourse': {
        handler() {


          if (this.orderCourse == "全部课程") {
            this.form.orderCourse = null;
          } else {
            this.form.orderCourse = this.orderCourse;
          }
        }
      },

      'orderStudentName': {
        handler() {


          if (this.orderStudentName == "全部学生") {
            this.form.orderStudentName = null;
          } else {

            this.form.orderStudentName = this.orderStudentName;
          }
        }
      },
      'teachers': {
        handler() {


          if (this.teachers == "全部员工") {
            this.form.saleName = null;
          } else {
            this.form.saleName = this.teachers;
          }
        }
      },
      'state': {
        handler() {


          if (this.state == "全部状态") {
            this.form.state = null;
          } else {
            this.form.state = this.state;
          }
        }
      },
    },

    methods: {
      delOrderSuccess() {
        this.getList();
      },
      openorderdetails(e) {
        var orderId = e.orderId;
        console.log(orderId);
        this.$refs.OrderDetailsDrawer.orderdetailsopen(orderId);

      },
      fullData(e) {
        if (e.orderCourseEndtime == 0) {
          return '长期有效';
        } else {
          return e.orderCourseEndtime;
        }

      },

      OtherMoney(e) {
        if (e == null) {
          return '无';
        } else {
          return '有';
        }

      },
      getPageHeight() {
        const pageHeight = window.innerHeight; // 获取页面高度
        console.log(pageHeight); // 输出页面高度到控制台
      },
      handleSelectionChange() {

      },
      getTeacherList() {
        this.userList.length = 0;
        this.queryParamsTeacher.deptId = this.$store.state.user.deptId;

        listUser2(this.queryParamsTeacher).then(response => {

          this.userList.push({
            "id": "100",
            "nickName": "全部员工"
          })
          this.userList.push(...response.rows)

        });
      },
      /** 查询课程管理列表 */
      getCourseList() {
        this.courseList.length = 0;
        this.queryParamsCourse.deptId = this.$store.state.user.deptId;
        listCourse(this.queryParamsCourse).then(response => {
          // this.courseList = response.rows;
          this.courseList.push({
            "id": "100",
            "courseName": "全部课程"
          })
          this.courseList.push(...response.rows)

        });
      },
      /** 查询学生信息列表 */
      getStudentList() {
        this.studentList.length = 0;
        this.queryParamsStudent.deptId = this.$store.state.user.deptId;
        listStudent(this.queryParamsStudent).then(response => {
          this.studentList.push({
            "id": "100",
            "userName": "全部学生"
          })
          this.studentList.push(...response.rows)
          // this.studentList = response.rows;


        });
      },
      /** 查询订单列表 */

      getList() {
        this.loading = true;
        this.form.deptId = this.$store.state.user.deptId;
        listOrder(this.addDateRange(this.form, this.dateRange)).then(response => {
          this.orderList = response.rows;
          this.total = response.total;
          this.loading = false;
          let all = 0;
          let allsummoneyDetermined = 0;
          for (var i = 0; i < this.orderList.length; i++) {
            var sum = parseFloat(this.orderList[i].amountReceivable);
            var summoneyDetermined = parseFloat(this.orderList[i].moneyDetermined);
            all = all + sum;
            allsummoneyDetermined = allsummoneyDetermined + summoneyDetermined


          }

          this.allmoney = all;
          this.allsummoneyDetermined = allsummoneyDetermined;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          orderStudentName: null,
          orderCourse: null,
          orderTime: null,
          orderType: null,
          orderCourseNumber: null,
          orderFreecourseNumber: null,
          orderCourseEndtime: null,
          amountReceivable: null,
          discountAmount: null,
          actualAmountReceived: null,
          totalClassHours: null,
          consumed: null,
          residue: null,
          orderRemark: null,
          orderRemark2: null,
          orderRemark3: null,
          orderRemark4: null,
          orderRemark5: null,
          orderRemark6: null,
          orderRemark7: null,
          orderRemark8: null,
          orderRemark9: null,
          orderRemark10: null,
          moneyDetermined: null,
          moneyUnconfirmed: null,
          droppedClassesNumber: null,
          moneyDroppedTotal: null,
          otherJson: null,
          moneyOtherTotal: null,
          moneyOrderTotal: null,
          profitAndLoss: null,
          unitPrice: null,
          unit: null,
          state: null,
          saleName: null,
          deptId: null,
          studentId: null,
          saleId: null,
          saleJson: null
        };
        this.resetForm("queryParams");
      },
      // 表单重置
      reset() {
        this.queryParams = {
          orderId: null,
          orderStudentName: null,
          orderCourse: null,
          orderTime: null,
          orderType: null,
          orderCourseNumber: null,
          orderFreecourseNumber: null,
          orderCourseEndtime: null,
          amountReceivable: null,
          discountAmount: null,
          actualAmountReceived: null,
          totalClassHours: null,
          consumed: null,
          residue: null,
          delFlag: null,
          createTime: null,
          createBy: null,
          updateBy: null,
          updateTime: null,
          orderRemark: null,
          orderRemark2: null,
          orderRemark3: null,
          orderRemark4: null,
          orderRemark5: null,
          orderRemark6: null,
          orderRemark7: null,
          orderRemark8: null,
          orderRemark9: null,
          orderRemark10: null,
          moneyDetermined: null,
          moneyUnconfirmed: null,
          droppedClassesNumber: null,
          moneyDroppedTotal: null,
          otherJson: null,
          moneyOtherTotal: null,
          moneyOrderTotal: null,
          profitAndLoss: null,
          unitPrice: null,
          unit: null,
          state: null,
          saleName: null,
          deptId: null,
          studentId: null,
          saleId: null,
          saleJson: null
        };
        this.resetForm("queryParams");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.form.pageNum = 1;
        this.getList();
      },



      // /** 提交按钮 */
      // submitForm() {
      //   this.$refs["form"].validate(valid => {
      //     if (valid) {
      //       if (this.form.orderId != null) {
      //         updateOrder(this.form).then(response => {
      //           this.$modal.msgSuccess("修改成功");
      //           this.open = false;
      //           this.getList();
      //         });
      //       } else {
      //         addOrder(this.form).then(response => {
      //           this.$modal.msgSuccess("新增成功");
      //           this.open = false;
      //           this.getList();
      //         });
      //       }
      //     }
      //   });
      // },


    }
  };
</script>
<style lang="scss" scoped>
  @keyframes blink {
    0% {
      opacity: 1;
    }

    /* 初始状态不透明度为1（完全显示）*/
    50% {
      opacity: 0.3;
    }

    /* 在动画进行到50％时将不透明度调低为0.3（部分隐藏）*/
    100% {
      opacity: 1;
    }

    /* 最后返回原始状态，完全显示*/
  }

  .content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    // background-color: skyblue;
  }

  .classimage {
    // height: 120px;
  }

  .contentbottom {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    // background-color: skyblue;
  }

  .classimage {
    height: 200px;
    width: 100%;
  }

  .item {
    flex: 0 0 calc((100% - 10px)/3);
    height: 50px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }

  .itemright {
    flex: 0 0 calc((100% - 20px)/4);
    // height: 120px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }

  .itemrightboot {
    flex: 0 0 calc((100% - 20px)/2);
    height: 280px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }

  .item:nth-child(3n) {
    /* 去除第3n个的margin-right */
    margin-right: 0;
  }

  .xian {
    border-left: 2px solid #f3f6ff;
  }
</style>
